<template>
   <nf-grid
    v-grid-drag="gridMeta"
    :dataList="dataList"
    v-bind="gridMeta"
    :selection="selection"
  >
  </nf-grid>
</template>

<script>
  import { reactive, watch, onMounted, nextTick } from 'vue'
  import { createDataList, createModel, lifecycle } from '/nf-ui-core'
  import { logTime } from '@naturefw/nf-tool'
  import _gridMeta from '../../grid/grid.json'
  import _formMeta from '../../form/form.json'

</script>

<script setup>
  lifecycle('列表', true)
 
  const props = defineProps({
    moduleId: Number,
    selection: Object,
    pageInfo: Object,
    active: Object
  })
 
 
  // 获取表单控件需要的meta
  const gridMeta = reactive(_gridMeta)
  // 改为插槽
  // formMeta.itemMeta[101].controlType = 1
  
  // 根据 meta 创建表单的 model
  const t = logTime('创建列表演示数据用时')
  const _dataList = createDataList(_formMeta.itemMeta, props.pageInfo.count).reverse()
  t.end()

  // 绑定控件的列表
  const dataList = reactive([])
  // 监听页号，设置列表数据
  watch(() => props.pageInfo.pageIndex, (index) => {
    // console.log(index)
    dataList.length = 0
    const cpp = (props.pageInfo.pageIndex - 1) * props.pageInfo.pageSize
    for(let i=0; i< props.pageInfo.pageSize; i++) {
      dataList.push(_dataList[cpp + i])
    }
  })

  setTimeout(() => {
    for(let i = 0; i< props.pageInfo.pageSize; i++) {
      dataList.push(_dataList[i])
    }
  }, 1)

</script>